<template>
  <div class="bg-white rounded-lg p-5 h-full flex flex-col">
    <div>
      <div class="font-bold text-lg mb-4">疫苗管理</div>
      <el-form :inline="true" :model="formData" ref="queryForm" size="small">
        <el-form-item>
          <el-input
            v-model="formData.vaccineName"
            placeholder="疫苗名称"
          ></el-input>
        </el-form-item>
        <div>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </div>
      </el-form>

      <el-table :data="dataList" border class="mt-4">
        <el-table-column type="index" label="序号" width="55" align="center">
        </el-table-column>
        <el-table-column prop="vaccineName" label="疫苗名称" min-width="100">
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="300">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="toRecordPage(scope.row, 0)"
              >疫苗运输记录</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="toRecordPage(scope.row, 1)"
              >疫苗储存温度记录</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="toRecordPage(scope.row, 2)"
              >疫苗出库记录</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style=""
        class="mt-2"
        :pageSize="formData.pageSize"
        layout="prev, pager, next"
        :page-sizes="[10, 20, 50]"
        :total="total"
        background
        @sizeChange="handleSizeChange"
        @currentChange="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <hr class="mt-auto mb-4" />
    <div class="flex justify-end">
      <el-button type="primary" @click="goBack">返回</el-button>
    </div>
  </div>
</template>

<script>
import { getVaccinesListAPI } from "@/api/zhangping/health-care/prevent-vaccinate";
export default {
  data() {
    return {
      formData: {
        vaccineName: null,
        pageSize:10,
        pageNum:1,
      },
      loading: false,
      dataList: [],
      pageSize: 10,
      total: 1000,
    };
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    toRecordPage(row, type) {
      console.log(this.$router);

      const pathMap = {
        0: "/health-care/prevent-vaccines/transport",
        1: "/health-care/prevent-vaccines/temperature",
        2: "/health-care/prevent-vaccines/outbound",
      };
      console.log(pathMap[type]);

      const obj = {
        path: pathMap[type],
        params: {
          id: "111",
          type: type,
        },
      };
      this.$router.push(obj);
    },
    handleCurrentChange(e) {
      console.log(e)
    },
    handleSizeChange(e) {
      console.log(e)
    },
    reset() {
      this.formData.vaccineName = ''
      this.search()
    },
    search() {
      this.formData.pageSize = 10
      this.formData.pageNum = 1
      this.getDataList()
    },
    goBack() {
      this.$router.back();
    },
    getDataList() {
      this.loading = true;

      getVaccinesListAPI(this.formData)
        .then((res) => {
          this.dataList = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped></style>
